<script lang="ts" setup>
import { ref, computed } from 'vue'
import { iPro } from '../views/home/homeType'
import { useRouter } from 'vue-router'

// 在组合式 API 中接收父组件传递的数据
const { proList } = defineProps({
    proList: Array<iPro>
})

const iconName = ref('list-switch')

// 计算属性
const classType = computed(() => {
    return iconName.value == 'list-switch' ? 2 : 1
})


/*
    ------------------- 路由传参 ---------------------
    方法一：params
        1. 配置路由的时候在 path: '/detail/:proid' 先加上参数
        2. 跳转页面的时候通过拼接的方式将参数传递 router.push('/detail/' + proid)
        3. 在进入的页面通过 useRoute 该 hooks 得到 route 对象  const route = useRoute()
        4. 在 route.params 中获取参数  console.log(route.params.proid)

    方法二：query 
        1. 通过 router.push({query:{}}) 传递对象的方式进行传参
        2. query 是一个对象，我们可以在该对象中添加多个参数
        3. 在进入的页面通过 useRoute 该 hooks 得到 route 对象  const route = useRoute()
        4. console.log(route.query)

    ------------------- 路由传参 ---------------------
*/

const router = useRouter()

// 商品的点击事件
function goDetailClick(proid: string) {

    // 获取被点击的商品 id 
    // router.push('/detail/' + proid)
    router.push({
        // path: '/detail'
        name: 'detail',
        query: {
            proid: proid,
            name: '张三',
            age: 18
        }
    })
}

</script>
<template>
    <!-- 
        cols_1: 左图右文
        cols_2: 上图下文
     -->
    <ul :class="'proList cols_' + classType">
        <li class="proItem" v-for="pro in proList" @click="goDetailClick(pro.proid)" :key="pro.proid">
            <div class="itemImage">
                <van-image style="width: 100%;height: 100%;" :src="pro.img1"></van-image>
            </div>
            <div class="itemInfo">
                <div class="proname van-multi-ellipsis--l2">{{ pro.proname }}</div>
                <div class="price">￥ {{ pro.originprice }}.00 元</div>
            </div>
        </li>
    </ul>
    <div class="changeIcon" @click="iconName = iconName == 'list-switch' ? 'list-switching' : 'list-switch'">
        <!-- <van-icon name="list-switching" /> -->
        <van-icon size="30" :name="iconName" />
    </div>
</template>
<style lang="scss" scoped>
.cols_1 {
    .proItem {

        height: 1rem;
        display: flex;
        border: 1px solid #f66;

        .itemImage {
            width: 1rem;
            height: 1rem;
            padding: 5px;
            box-sizing: border-box;
        }

        .itemInfo {
            flex: 1;
            padding: 5px 10px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
        }
    }
}

.proname {
    font-size: 14px;
}

.price {
    color: red;
}



/* -------------- 上图下文 -------------- */

.cols_2 {
    display: flex;
    flex-wrap: wrap;

    .proItem {
        width: 48%;
        margin: 3px 1%;
        border: 1px solid #f66;
        background-color: white;
        box-sizing: border-box;

        .itemImage {
            width: 100%;
            height: 2rem;
        }

        .itemInfo {
            line-height: 22px;
            padding: 5px 10px;
            box-sizing: border-box;
        }
    }
}

.changeIcon {
    position: fixed;
    bottom: 64px;
    right: 14px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #f66;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>